import { useRouteQuery } from '@vueuse/router'

export function useTabMemory(name: string, defaultValue?: string) {
  const route = useRoute()
  const activeTabName: Ref<string> = useRouteQuery(name, defaultValue, {
    mode: 'push',
  })
  /** 用于判断挂载哪个组件，避免 tab 切换多次挂载 */
  const tabName = ref(route.query[name] || '')

  const renderFirst = computed(() => {
    return !tabName.value || tabName.value === defaultValue
  })
  return { activeTabName, tabName, renderFirst }
}
